import React from 'react';
import logo from '../assert/image/logo.svg';
import '../assert/css/App.css';
import { Button } from 'antd'
import { connect } from 'react-redux'
import { getExample } from '../action/example'

class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      exampleInfo: {
        message: "for you",
      }
    }
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.exampleGetInfo.status.success) {
      nextProps.exampleGetInfo.status.success = false
      return {
        exampleInfo: nextProps.exampleGetInfo.res
      }
    }
    return null
  }

  render() {

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Happr start with <code>React</code> {this.state.exampleInfo.message}.
        </p>
          <p>{this.props.value}</p>
          <Button type="primary" onClick={() => { this.props.getExample() }}>Get Example Info</Button>
        </header>
      </div>
    )
  }
}

export default connect(state => ({
  exampleGetInfo: state.exampleGetInfo
}), {
  getExample
})(App)
